<template>
  <div class="index">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="kflexc" style="padding: 20px;">
          <div style="color: rgb(5, 143, 255);" @click="back">< 返回</div>
          <div style="margin-left: 20px; font-size: 18px; font-weight: bold;">异常订单自动处理</div>
        </div>
        <div style="background: rgb(220, 230, 243); font-size: 14px; color: rgb(54, 67, 81); margin:0 20px 20px 20px; padding: 10px 20px; border-radius: 2px;">根据上游接口返回的失败原因与您设置的规则进行匹配，匹配中后执行您指定指定的操作，创建关键词匹配规则请谨慎设置。</div>
        <div class="kflex" style="padding: 0 20px 20px 20px;">
          <el-button type="danger" round @click="tianjia">添加自动处理规则</el-button>

          <el-select v-model="search.channel_id" filterable  style="margin: 0 20px; width: 300px;" clearable  placeholder="接口渠道">
          	<el-option
          	v-for="(item,index) in qdList"
          	:key='index'
          	:label="item.user_defined_name" :value="item.channel_id"></el-option>
          </el-select>
          <el-button type="danger" round @click="sousuo">检索</el-button>
        </div>
        <div>
          <el-table :data="tableData" :header-cell-style="{'border-bottom':'solid 1px #d2d3da','text-align':'center','background-color':'#EEEEEE'}" >
            <el-table-column prop="reason" label="异常原因或关键词" align="center"></el-table-column>
            <el-table-column prop="user_defined_name" label="所属接口渠道" align="center"></el-table-column>
            <el-table-column prop="created_at" label="添加时间" align="center"></el-table-column>
            <el-table-column prop="operate_name" label="自动处理方式" align="center"></el-table-column>
            <el-table-column prop="auto" label="操作" align="center">
              <template slot-scope="scope">
               <!-- <el-button type="text" @click="shanchu(scope.row)">删除</el-button> -->
               <el-button @click="change(scope.row)" type="text" size="small">修改</el-button>
               <el-button @click="deletitem(scope.row.id)" type="text" size="small" style="color: #2974FF;">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: center;margin-top:20px">
          	<el-pagination
          		@current-change = 'pagechange'
          		layout="prev, pager, next"
          		:total="total">
          	</el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加自动处理规则" center :visible.sync="log" width="480px" :close-on-click-modal="false">
      <div style="margin-bottom: 20px;">
        <el-select v-model="all.channel_id" style="width: 100%;" filterable  clearable  placeholder="选择要匹配的自动生产接口">
        	<el-option
        	v-for="(item,index) in qdList"
        	:key='index'
        	:label="item.user_defined_name" :value="item.channel_id"></el-option>
        </el-select>
      </div>
      <div style="margin-bottom: 20px;"><el-input v-model="all.reason" placeholder="输入匹配的关键词"></el-input></div>
      <div style="margin-bottom: 20px;">
        <el-select v-model="all.operate" style="width: 100%; margin-bottom: 20px;" placeholder="指定匹配中关键词后的操作">
        	<!-- <el-option
        	v-for="item in options"
        	:key="item.value"
        	:label="item.label"
        	:value="item.value">
        	</el-option> -->
          <el-option
          label="开卡失败"
          value="1">
          </el-option>
          <el-option
          label="重新提交"
          value="2">
          </el-option>


        </el-select>
        <el-time-picker  style="width: 100%; margin-bottom: 20px;" v-if="all.operate == 2" value-format="HH:mm"
            v-model="all.recommit_time"
            placeholder="重提时间">
        </el-time-picker>
      </div>
      <div style="margin-bottom: 20px; color: rgb(174, 174, 174);">
        将录入的关键词与指定的自动生产接口返回的失败原因进行匹配，
        如果包含该关键词则按照指定的操作执行
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" round :disabled="ing" @click="queding">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import axios from "axios";
  import top from "@/components/top.vue";
  import left from "@/components/left.vue";
  import foot from "@/components/foot.vue";
  export default {
    components: {
      left: left,
      top: top,
      foot: foot
    },
    name: "lanjie",
    data() {
      return {
        search:{
          page:1,
          page_size:20,
          channel_id:""
        },
        tableData: [],
        log:false,
        options:[],
        qdList:[],
        all:{
          channel_id:"",
          reason:"",
          operate:"",
          type:1,
          recommit_time:""
        },
        ing:false,
        total:0
      };
    },
    created() {
      this.getlist()
      this.getlist2()
    },
    mounted() {},
    methods: {
      pagechange:function(val){
        this.search.page = val
        this.getlist2()
      },
      sousuo:function(){
        this.search.page = 1
        this.getlist2()
      },
      deletitem(id){
      	this.$confirm('是否确认删除?', '提示', {
      	confirmButtonText: '确定',
      	cancelButtonText: '取消',
      	type: 'warning'
      	}).then(() => {
      		axios.post('/api/plan-market/upstream/order/reason/delete', {
      				id:id
      			})
      			.then((response) => {
      				this.$message({
      					type: 'success',
      					message: '删除成功!'
      				});
      				this.getlist2()
      			})

      	}).catch(() => {
      		this.$message({
      			type: 'info',
      			message: '已取消'
      		});
      	});
      },
      change:function(item){
        this.all = {
          channel_id:item.channel_id,
          reason:item.reason,
          operate:item.operate.toString(),
          type:1,
          id:item.id,
          recommit_time:item.recommit_time
        }
        this.log = true
      },
      tianjia:function(){
        this.all = {
          channel_id:"",
          reason:"",
          operate:"",
          type:1,
          recommit_time:""
        }
        this.log = true
      },
      back:function(){
        this.$router.go(-1)
      },
      queding:function(){
		
		if(this.all.operate == 2){
			if(this.all.recommit_time == ''){
				this.$message.success('请填写重提时间');
				return
			}
		}
        this.ing = true
        axios.post('/api/plan-market/upstream/order/reason/save',this.all)
        	.then(response => {
        		if(response.data.msg.code != 0){
        		    this.$message.error(data.data.msg.info);
                setTimeout(()=>{
                  this.ing = false
                },500)
        		}else{
                this.getlist2()
                this.log =false
                this.$message.success('发布成功');
                setTimeout(()=>{
                  this.ing = false
                },500)
        		}
        	})
      },
      getlist2:function(){
          axios.get('/api/plan-market/upstream/order/reason/list',{params:this.search})
        	.then(response => {
        		if(response.data.msg.code != 0){
        		    this.$message.error(response.data.msg.info);
        		}else{
        		    this.tableData = response.data.data.data
                this.total = response.data.data.total
        		}
        	})
      },
      getlist:function(){
        axios.get('/api/plan-market/upstream/channel/config/list', {
        	params: {
        		'y_name':'c_name'
        	}
        })
        .then((response) => {
        		this.qdList=response.data.data
        })
        axios.get('/api/plan-market/get/operate/list')
        	.then((response) => {
        		var arr = Object.entries(response.data)
        		for(var i = 0;i<arr.length;i++){
        			this.options.push({value:arr[i][0],label:arr[i][1]})
        		}
        	})
      }

    }
  };
</script>

<style lang="scss" scoped>
  /deep/ .el-select{}
  /deep/ .el-input{}
  /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250); border: 0;}
  /deep/ .el-range-editor .el-range-input { background: #f7f8fa;}
  /deep/ .el-button{ padding: 11px 23px !important;}

  /deep/ .el-input__inner:-moz-placeholder {
      color: rgb(140, 140, 140);
  }

  /deep/ .el-input__inner:-ms-input-placeholder {
      color: rgb(140, 140, 140);
  }

  /deep/ .el-input__inner::-webkit-input-placeholder {
      color: rgb(140, 140, 140);
  }

  /deep/ .el-button--danger {
      color: #FFF;
      background-color: #2974FF;
      border-color: #2974FF;
  }
</style>
